<script>
import ValidCode from '@/components/utils/ValidCode.vue'
export default {
  name: "UserLogin",
  components:{
    ValidCode
  },
  data() {
    return {
      selectedLanguage:'中文',
      languageS:'chinese',
      main:{
        qualityManagement:'质量管理系统',
        welcome:'欢迎登录质量管理系统',
        account:'用户工号：',
        password:'用户密码：',
        enterAccount:'请输入账号',
        enterPassword:'请输入密码',
        newPassword:'新密码：',
        enterNewPassword:'请输入新密码',
        change:'修改',
        personalAccount:'个人账户登录',
        companyAccount:'公司账户登录',
        noAccount:'还没有账户？请注册',
        forgetPassword:'忘记密码'
      },
      //记录验证码信息，是图片生成的信息
      ValidCode:'',
      control:0,
      user:{
        //主键
        id:'',
        //记录用户名
        userName:'',
        //记录用户密码
        password:'',
        //记录用户输入的信息
        code:'',
        //进行用户输入校验
      },
      userTemp:{
        //主键
        id:'',
        //记录用户名
        userName:'',
        //记录用户密码
        password:'',
        //记录用户输入的信息
        code:'',
        //进行用户输入校验
      },
      newPassword:'',
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },],
      },

    };
  },
  createValidCode:'',
  methods: {
    languageSelect(language){
      this.selectedLanguage=language
      this.languageS=language
      if (language==='chinese'){
        this.main.qualityManagement='质量管理系统'
        this.main.welcome='欢迎登录质量管理系统'
        this.main.account='用户工号：'
        this.main.password='用户密码：'
        this.main.enterAccount='请输入账号'
        this.main.enterPassword='请输入密码'
        this.main.newPassword='新密码：'
        this.main.enterNewPassword='请输入新密码'
        this.main.change='修改'
        this.main.personalAccount='个人账户登录'
        this.main.companyAccount='公司账户登录'
        this.main.noAccount='还没有账户？请注册'
        this.main.forgetPassword='忘记密码'
      }
      else if (language==='english'){
        this.main.qualityManagement='Quality Management Platform'
        this.main.welcome='Welcome to log in'
        this.main.account='Account:'
        this.main.password='Password：'
        this.main.enterAccount='Enter your account'
        this.main.enterPassword='Enter your password'
        this.main.newPassword='New password:'
        this.main.enterNewPassword='Enter your new password'
        this.main.change='Change'
        this.main.personalAccount='Personal account login'
        this.main.companyAccount='Company account login'
        this.main.noAccount='Don\'t have an account yet? Please register'
        this.main.forgetPassword='Forgot password'
      }
      else if (language==='russian'){
        this.main.qualityManagement='Платформа управления качеством'
        this.main.welcome='Добро пожаловать войти'
        this.main.account='Счет:'
        this.main.password='Пароль：'
        this.main.enterAccount='Введите свой аккаунт'
        this.main.enterPassword='Введите свой пароль'
        this.main.newPassword='Новый пароль:'
        this.main.enterNewPassword='Введите свой новый пароль'
        this.main.change='Изменить'
        this.main.personalAccount='Логин личной учетной записи'
        this.main.companyAccount='Логин учетной записи компании'
        this.main.noAccount='У вас еще нет учетной записи? Пожалуйста, зарегистрируйтесь'
        this.main.forgetPassword='Забыл пароль'
      }
      this.$emit('language-changed', language);
    },
    createValidCode(data){
      this.ValidCode = data
    },
    loginUser(){
      this.$refs['LoginRef'].validate((valid) => {
        if(valid){
          //表单验证通过后
          this.$request.post('/UserLogin',this.user).then(res =>{
            this.userTemp=res.data
            console.log(this.userTemp)
            if (res.code===1){
              if (this.user.password==='123456'){
                this.$message.success('登录成功，但密码过于简单，请修改，修改后将跳转到主页')
                this.control=1
                localStorage.setItem("u_token",JSON.stringify(res.data.jwt))
                localStorage.setItem("userName",JSON.stringify(res.data.userName))
              }
              else {
                this.$router.push('/')
                this.$message.success('登录成功')
                localStorage.setItem("u_token",JSON.stringify(res.data.jwt))
                localStorage.setItem("userName",JSON.stringify(res.data.userName))
              }
            }else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    editPassword(){
      // 判断数据，如果小于6位，并且还是123456的，返回，让重新写
      //根据id，修改数据库中的密码
      this.$request.post('userEditOneField',{
        fieldName:'password',
        fieldVal:this.newPassword,
        id:this.userTemp.id,
      }).then(result=>{
        if (result.data==='成功'){
          //重新查询数据，
          this.$router.push('/')
          this.$message.success('登录成功')
        }
        else {
          this.$message.error('出现异常，请联系管理员')
        }
      })
    }
  },
  mounted() {
    this.user.code=this.ValidCode
  }
}
</script>

<template>
  <div>
    <el-header>
      <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
        <span style="position: absolute; left: 50%; transform: translateX(-50%);">{{main.qualityManagement}}</span>
        <el-dropdown style="margin-left: auto; font-size: 16px; cursor: pointer; color: #fff; z-index: 1;">
          <span class="el-dropdown-link" style="color: white; cursor: pointer; display: flex; align-items: center; color: #fff;">
            {{ selectedLanguage }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="languageSelect('chinese')">中文</el-dropdown-item>
            <el-dropdown-item @click.native="languageSelect('english')">English</el-dropdown-item>
            <el-dropdown-item @click.native="languageSelect('russian')">Русский язык</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <div style="height: 88vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #ffffff">
      <div class="embossed-div" style="display: flex; background-color: white;width: 800px; border-radius: 10px; overflow: hidden">
        <div style="flex: 1;">
          <img src="@/assets/imgLogin.png" alt="" style="width: 100%;">
        </div>
        <div style="flex: 1; display: flex; align-items: center; justify-content: center;">
          <el-form :model="user" :rules="rules" ref="LoginRef" style="width: 80%">
            <div style="font-size: 25px;font-weight: bold;text-align: center">{{main.welcome}}</div>
            <br>
            <el-form-item :label="main.account" prop="userName" label-width="95px">
              <el-input prefix-icon="el-icon-user" size="medium" :placeholder="main.enterAccount" v-model="user.userName" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item :label="main.password" prop="password" v-if="control===0" label-width="100px">
              <el-input prefix-icon="el-icon-lock" size="medium" show-password :placeholder="main.enterPassword" v-model="user.password" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item :label="main.newPassword" v-else>
              <el-input prefix-icon="el-icon-lock" size="medium" :placeholder="main.enterNewPassword" style="width: 200px" v-model="newPassword"></el-input>
              <el-link style="margin-left: 10px" @click="editPassword">{{main.change}}</el-link>
            </el-form-item>
            <el-form-item prop="code">
             <div style="display: flex">
               <el-input prefix-icon="el-icon-circle-check" size="medium" style="flex: 1" v-model="user.code"></el-input>
               <div style="flex: 1">
                 <ValidCode @input="createValidCode" style="background-color: #ffffff;margin-top: 5px;margin-left: 5px; height: 36px; width: 100%"/>
               </div>
             </div>
            </el-form-item>
            <el-form-item>
              <div style="flex: 1">
                <el-button type="primary" style="flex: 1" @click="loginUser">{{main.personalAccount}}</el-button>
                <el-button type="primary" style="flex: 1" disabled>{{main.companyAccount}}</el-button>
              </div>
            </el-form-item>
<!--            <div style="display: flex">-->
<!--              <div style="flex: 1">还没有账户？请<span style="color:#0269fa; cursor: pointer">注册</span></div>-->
<!--              <div style="flex: 1; text-align: right; color: #0269fa;cursor: pointer">忘记密码</div>-->
<!--            </div>-->
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .login-container {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

  .error-message {
  color: red;
  margin-top: 10px;
}

  .el-header{
    background-color: #B3C0D1;
    color: #ff0000;
    font-size: 35px;
    text-align: center;
    height: 10vh;
    line-height:8vh;
  }
  .embossed-div {
    background-color: #f0f0f0;
    /* 添加浮雕效果 */
    box-shadow:
      /* 右侧和高亮浮雕 */
        2px 2px 0 0 #fff,
          /* 左侧和阴影浮雕 */
        -2px -2px 0 0 #888;

    /* 为了使浮雕效果更明显，可以添加一些内边距 */
    padding: 10px;

    /* 还可以添加一些其他样式，如边框、圆角等 */
    border: 1px solid #ccc;
    border-radius: 5px;
  }
</style>